<template>
  <div class="product-detail-container">
    <el-row :gutter="10">
      <el-col :xs="24" :sm="24" :md="11" :lg="11" :xl="11">
        <div class="item">
          <div class="label">
            <span>{{$t('production.loanType')}}</span>
          </div>
          <div class="content">
            <span>{{getLoanTypeName()}}</span>
          </div>
        </div>
      </el-col>
      <!-- 产品名 -->
      <el-col :xs="24" :sm="24" :md="11" :lg="11" :xl="11">
        <div class="item">
          <div class="label">
            <span>{{$t('production.productionName')}}</span>
          </div>
          <div class="content">
            <span>{{product.title}}</span>
          </div>
        </div>
      </el-col>
      <!-- 产品类型 -->
      <el-col v-if="product.product_type" :xs="24" :sm="24" :md="11" :lg="11" :xl="11">
        <div class="item">
          <div class="label">
            <span>{{$t('production.productType')}}</span>
          </div>
          <div class="content">
            <span>{{_convertProductType(product.product_type)}}</span>
          </div>
        </div>
      </el-col>
      <!-- 服务类型 -->
      <el-col v-if="product.service_type" :xs="24" :sm="24" :md="11" :lg="11" :xl="11">
        <div class="item">
          <div class="label">
            <span>{{$t('production.serviceType')}}</span>
          </div>
          <div class="content">
            <span>{{_convertProductType(product.service_type)}}</span>
          </div>
        </div>
      </el-col>
      <!-- 额度范围 -->
      <el-col :xs="24" :sm="24" :md="11" :lg="11" :xl="11">
        <div class="item">
          <div class="label">
            <span>{{$t('production.limitRange')}}</span>
          </div>
          <!-- 最低额度， 最高额度 -->
          <div class="content">
            <span>{{_convertToTenThousand(product.min_deposit)}}-{{_convertToTenThousand(product.max_deposit)}} 万</span>
          </div>
        </div>
      </el-col>
      <!-- 贷款期限 -->
      <el-col :xs="24" :sm="24" :md="11" :lg="11" :xl="11">
        <div class="item">
          <div class="label">
            <span>{{$t('production.loanTimeRange')}}</span>
          </div>
          <div class="content">
            <span>{{product.min_time_limit}}-{{product.max_time_limit}} 天</span>
          </div>
        </div>
      </el-col>
      <!-- 抵押类型 -->
      <el-col v-if="product.pledgeType" :xs="24" :sm="24" :md="11" :lg="11" :xl="11">
        <div class="item">
          <div class="label">
            <span>{{$t('production.pledgeType')}}</span>
          </div>
          <div class="content">
            <span>{{product.mortgage_type}}</span>
          </div>
        </div>
      </el-col>
      <!-- 放款时间 -->
      <el-col :xs="24" :sm="24" :md="11" :lg="11" :xl="11">
        <div class="item">
          <div class="label">
            <span>{{$t('production.lendingTime')}}</span>
          </div>
          <div class="content">
            <span>{{product.loan_time}}</span>
          </div>
        </div>
      </el-col>
      <!-- 服务城市 -->
      <el-col :xs="24" :sm="24" :md="11" :lg="11" :xl="11">
        <div class="item">
          <div class="label">
            <span>{{$t('production.city')}}</span>
          </div>
          <div class="content">
            <span>{{product.city}}</span>
          </div>
        </div>
      </el-col>
      <!-- 公司logo -->
      <el-col :xs="24" :sm="24" :md="11" :lg="11" :xl="11">
        <div class="item">
          <div class="label">
            <span>{{$t('production.companyLogo')}}</span>
          </div>
          <div class="content">
            <!-- <img v-if="form.logoUrl" :src="form.logoUrl" class="logo"> -->
            <!-- <img src="@/assets/e-company.jpg" class="logo"> -->
            <img src="product.logo" class="logo">
          </div>
        </div>
      </el-col>
      <!-- 分割线 -->
      <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
        <div class="divider"></div>
      </el-col>
      <!-- 平均每月综合费率 -->
      <el-col :xs="24" :sm="24" :md="11" :lg="11" :xl="11">
        <div class="item">
          <div class="label">
            <span>{{$t('production.averageMonthlyCompositeRate')}}</span>
          </div>
          <div class="content">
            <span>{{product.averageMonthlyFeeRateMin}}-{{product.averageMonthlyFeeRateMax}}</span>
          </div>
        </div>
      </el-col>
      <!-- 一次性费用 -->
      <el-col :xs="24" :sm="24" :md="11" :lg="11" :xl="11">
        <div class="item">
          <div class="label">
            <span>{{$t('production.oneTimeCharge')}}</span>
          </div>
          <div class="content">
            <span>{{product.disposable_cost_type}}</span>
            <span>{{product.oneTimeFeeRateMin}}-{{product.oneTimeFeeRateMax}}</span>
          </div>
        </div>
      </el-col>
      <!-- 担保金比率 -->
      <el-col :xs="24" :sm="24" :md="11" :lg="11" :xl="11">
        <div class="item">
          <div class="label">
            <span>{{$t('production.collateralRatio')}}</span>
          </div>
          <div class="content">
            <span>{{product.collateralRatioType}}</span>
            <span>{{product.collateralRatioMin}}-{{product.collateralRatioMax}}</span>
          </div>
        </div>
      </el-col>
      <!-- 放款后收费 -->
      <el-col :xs="24" :sm="24" :md="11" :lg="11" :xl="11">
        <div class="item">
          <div class="label">
            <span>{{$t('production.chargeAfterLoan')}}</span>
          </div>
          <div class="content">
            <span>{{product.charge_money}}</span>
          </div>
        </div>
      </el-col>
      <!-- 分割线 -->
      <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
        <div class="divider"></div>
      </el-col>
      <!-- 申请条件 -->
      <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
        <div class="item">
          <div class="label-title">
            <span>{{$t('production.applicationRequirements')}}</span>
          </div>
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
        <div class="item">
          <div class="content">
            <span>{{product.apply_for_position}}</span>
          </div>
        </div>
      </el-col>
      <!-- 分割线 -->
      <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
        <div class="divider"></div>
      </el-col>
      <!-- 所需材料 -->
      <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
        <div class="item">
          <div class="label-title">
            <span>{{$t('production.requiredMaterial')}}</span>
          </div>
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
        <div class="item">
          <div class="content">
            <!-- <span>1、身份证明<br/> 2、近半年对公或对私银行流水<br/> 3、营业执照或租赁合同<br/> 4、住址证明</span> -->
            <span>{{product.material_requested}}</span>
          </div>
        </div>
      </el-col>
      <!-- 利率说明 -->
      <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
        <div class="item">
          <div class="label-title">
            <span>{{$t('production.interestRateInstructions')}}</span>
          </div>
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
        <div class="item">
          <div class="content">
            <!-- <span>月利率0.6% - 1%<br/> 还款方式：本金加利息 先付息到期一次性还本<br/> 贷款额度：10 - 200万<br/></span> -->
            <span>{{product.rate_description}}</span>
          </div>
        </div>
      </el-col>
    </el-row>
    <div class="button-box">
      <el-button 
        type="default" 
        @click.native.prevent="editProduct">
        {{ $t('production.edit') }}
      </el-button>  
      <el-button 
        type="primary" 
        @click.native.prevent="deleteProduct">
        {{ $t('production.remove') }}
      </el-button>  
    </div>
 </div>
</template>

<script>
import { getCityNameByCode } from '@/utils/chinaArea'
import _ from 'lodash'

export default {
  name: "ProductDetail",
  data() {
    return {
      // 银行产品id
      bankProductId: this.$route.query.bankProductId,
      // 快速产品id
      fastProductId: this.$route.query.fastProductId,
      // 从服务器获取的产品对象
      product: {},
      // 组件中的loading遮罩层对象，调用openFullScreenLoading方法时赋值
      loading: null,
    };
  },
  created: function() {
    this.init()
  },
  methods: {
    init() {
      this.openFullScreenLoading()

      let promise
      if (this.bankProductId) {
        promise = this.getBankProductById(this.bankProductId)
      } else if (this.fastProductId) {
        promise = this.getFastProductById(this.fastProductId)
      }

      if (promise) {
        promise.then(data => {
          this.processProductData(data)
          this.closeFullScreenLoading()
        }).catch(error => {
          console.error('init product detail has error:', error)
          this.$notify.error({
            title: this.$t('operationFailed'),
            message: this.$t('errorTips'),
          })

          this.closeFullScreenLoading()
        })
      } else {
        this.closeFullScreenLoading()
      }
    },
    /**
     * 处理产品数据
     */
    processProductData(data) {
      // console.log('product = ', data)
      if (data && data['code'] === 0) {
        const productData = data['data']
        if (productData) {
          this.product = productData
        }
        if (this.product.city) {
          this.product.cityNames = getCityNameByCode(this.product.city)
        }
      } else {
        this.$notify({
          title: this.$t('operationFailed'),
          message: data['msg'],
          type: 'warning'
        })
      }
    },
    getFastProductById(id) {
      return this.$store.dispatch('getFastProductByID', { id })
    },
    getBankProductById(id) {
      return this.$store.dispatch('getBankProductByID', { id })
    },
    editProduct() {
      this.$router.push({path:'/production/editProduct', query:{productId: this.productId}})
    },
    deleteProduct() {
      this.$confirm(this.$t('production.removeProductConfirmContent'), this.$t('production.removeProductConfirmTitle'), {
          confirmButtonText: this.$t('confirm'),
          cancelButtonText: this.$t('cancel'),
          type: 'warning'
        }).then(() => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
    },
    /**
     * 把钱数转换为万
     */
    _convertToTenThousand(num, decimal = 1) {
      let result = num
      result = _.floor((result / 10000), decimal)
      return result
    },
    /**
     * 把产品类型转换为显示的字符串
     */
    _convertProductType(num) {
      let result = num
      switch(num) {
        case 1:
          result = '工薪贷'
          break
        case 2:
          result = '生意贷'
          break
        case 3:
          result = '车抵贷'
          break
        case 4:
          result = '房抵贷'
          break
        default:
          break
      }
      return result
    },
    /**
     * 把服务种类转换为显示的字符串
     */
    _convertProductType(num) {
      let result = num
      switch(num) {
        case 1:
          result = '出借服务'
          break
        case 2:
          result = '中介服务'
          break
        case 3:
          result = '担保服务'
          break
        default:
          break
      }
      return result
    },
    getLoanTypeName() {
      let result = '银行贷'
      if (this.fastProductId) {
        result = '极速贷'
      }
      return result
    },
    /**
     * 显示loading遮罩层
     */
    openFullScreenLoading() {
      this.loading = this.$loading({
        lock: true,
        text: this.$t('loading') + '...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
    },
    /**
     * 关闭loading遮罩层
     */
    closeFullScreenLoading() {
      if (this.loading) {
        this.loading.close()
      }
    }
  },
  computed: {}
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
@import '@/styles/variables.scss';
.product-detail-container {
  max-width: 1000px;
  margin: 20px auto;
  .item {
    .label {
      display: table-cell;
      line-height: 22px;
      padding-bottom: 16px;
      margin-right: 8px;
      color: rgba(0, 0, 0, 0.85);
      white-space: nowrap;
      vertical-align: top;
    }
    .label:after {
        content: ':';
        margin: 0 8px 0 2px;
        position: relative;
        top: -0.5px;
    }
    .label-title {
      display: table-cell;
      line-height: 22px;
      padding-bottom: 16px;
      margin-right: 8px;
      color: rgba(0, 0, 0, 0.85);
      white-space: nowrap;
      vertical-align: top;
    }
    .content {
      line-height: 22px;
      width: 100%;
      padding-bottom: 16px;
      color: rgba(0, 0, 0, 0.65);
      display: table-cell;
      word-break: break-all;
      .logo {
        width: 120px;
        height: 120px;
        display: block;
        border: 2px solid #ccc;
        border-radius: 50%;
      }
    }
  }
  .divider {
    border-bottom: 2px solid $dividercolor;
    margin-bottom: 20px;
  }
  .button-box {
    max-width: 600px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
  }
}
@media screen and (max-width: $sm){
  .product-detail-container {
    margin: 20px;
  }
}
</style>

